<template>
	<view class="LimitedSeckill" v-if="limitedData.activityGoods.length">
		<view class="top-div clearfix">
			<view class="float_left icon-xsms">
				<text class="ibonfont ibonshandian"></text>
				限时闪购
			</view>
			<ul class="time-ul clearfix float_left">
				<li class="time-li float_left">{{ phaseTime[0] || 0 }}</li>
				<li class="icon-maohao float_left">:</li>
				<li class="time-li float_left">{{ phaseTime[1] || 0 }}</li>
				<li class="icon-maohao float_left">:</li>
				<li class="time-li float_left">{{ phaseTime[2] || 0 }}</li>
			</ul>
			<view class="float_left end-text">后结束</view>
		</view>
		<view class="seckill-view">
			<scroll-view scroll-x="true" class="seckill-main">
				<view
					class="sk-goods-li"
					v-for="(item, index) in limitedData.activityGoods"
					@click="goPage('/pages/goods/GoodsDetail?id=' + item.goodsId + '&skuId=' + item.skuId)"
				>
					<view class="goods-img"><image :src="item.images" mode="aspectFit"></image></view>
					<view class="goods-name ellipsis" v-if="modelData.goodsInfo.includes(1)">{{ item.title }}</view>
					<view class="goods-price" v-if="isShowPrice">
						<text class="now-price" v-if="modelData.goodsInfo.includes(2)">¥{{ item.salePrice.salePrice }}</text>
						<text class="origin-price" v-if="modelData.goodsInfo.includes(3)">¥{{ item.salePrice.marketPrice }}</text>
					</view>
					<view v-else class="goods-price"><text class="now-price" v-if="modelData.goodsInfo.includes(2)">请登录</text></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		limitedData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	computed: {
		isShowPrice() {
			const isShowPrice = this.$store.state.basicSet.goodsPrice || 5;
			if (this.$store.state.hasLogin) {
				return true;
			} else {
				return parseInt(isShowPrice) === 5;
			}
		}
	},
	data() {
		return {
			phaseTime: []
		};
	},
	mounted() {
		if (this.limitedData.endTime - new Date() !== 0) {
			setInterval(() => {
				this.phaseTime = this.$u.timeFormat(this.limitedData.endTime - new Date(), 'hh:mm:ss').split(':');
			}, 1000);
		}
	}
};
</script>

<style lang="scss" scoped>
.LimitedSeckill {
	width: 706upx;
	margin: 0 auto;
	.top-div {
		line-height: 70upx;
		.icon-xsms {
			font-size: 26upx;
			.ibonshandian {
				margin-right: 10upx;
				font-size: 34upx;
				color: #f65237;
				vertical-align: middle;
			}
		}
		.time-ul {
			color: #f65237;
			font-size: 28upx;
			padding-left: 14upx;
			padding-right: 8upx;
		}
		.end-text {
			font-size: 24upx;
			color: #999999;
		}
	}
	.seckill-view {
		padding: 30upx 15upx;
		width: 706upx;
		background-color: #ffffff;
		border-radius: 12upx;
		.seckill-main {
			width: 100%;
			white-space: nowrap;
			.sk-goods-li {
				width: 190upx;
				padding: 0 16upx;
				text-align: center;
				display: inline-block;
				.goods-img {
					width: 160upx;
					height: 160upx;
					image {
						display: inline-block;
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
				.goods-name {
					font-size: 24upx;
					padding: 10upx 0;
					-webkit-line-clamp: 1;
					display: block;
				}
				.goods-price {
					font-size: 24upx;
					color: $price-color;
					.origin-price {
						margin-left: 10px;
						color: #999999;
						font-size: 20rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
}
</style>
